<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>

    <style type="text/css">
        #dvPool
        {
            width: 200px;
            height: 30px;
            padding: 10px;
        }
        #dvWorkBench
        {
            width: 400px;
            height: 100px;
        }
        .clsGrayBgClr
        {
            border: 1px dotted #000000;
            background-color: #dddddd;
        }
        .Square 
        {
	        margin: 5px;	
	        width: 20px; height: 20px;
	        float: left;
	        border: solid 1px black;
        }
        #dvPool .Square {
	        cursor: pointer;
        }
        .Focus {
	        border: solid 1px white;
	        float: left;
        }        
    </style>
	<script type="text/javascript" src="js/jquery-1.9.1-vsdoc.js"></script>
	<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
</head>
<body>
<div id="dvPool" class="clsGrayBgClr"></div><hr />
<div id="dvWorkBench" class="clsGrayBgClr"></div>
</body>
</html>

<script type="text/javascript">
	$(function(){
		var colors = ['red','green','blue','yellow'];
		$.each(colors,function(){
			$('#dvPool').append("<div class='Square' style='background-color:"+ this +"'/>");
		});
		
		$('#dvPool div').click(function(){
			$('#dvPool div').removeClass("Focus");
			$(this).addClass("Focus");
			var newDiv = $(this).clone().removeClass("Focus").click(function(){
				jQuery('#dvWorkBench .Focus').removeClass("Focus");
				$(this).addClass("Focus");
			});
			
			if($('#dvWorkBench .Focus').length > 0)
				$('#dvWorkBench .Focus').after(newDiv);
			else
				$('#dvWorkBench').append(newDiv);
		});
		
		$('<input type="button" value="pressMe" />').click(function(){
			$('#dvWorkBench div').toggle("slow");
		}).appendTo("body");
	});
</script>